<template>
  <div v-if="isShow">
    <el-select v-model="productSpecificationsIdArr" multiple placeholder="请选择您的规格" style="width: 250px;" @change="updateProductSpecifications">
      <el-option
        v-for="item in allProductSpecificationsArr"
        :key="item.id"
        :label="item.name+'('+item.type.name+')'"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'ProductSpecificationsSelectBox',
  props:{
    callback:Function
  },
  data:function () {
    return {
      sourceProductSpecifications:[],
      productSpecificationsIdArr:[],
      allProductSpecificationsArr:[],
      isShow:false
    }
  },
  mounted () {
    this.getAllProductSpecificationsArr()
  },
  methods:{
    setSelectIds:function (productSpecificationsArr) {
      this.sourceProductSpecifications=productSpecificationsArr
      if (this.allProductSpecificationsArr.length===0){
        return;
      }
      var arr=[]
      let $this=this
      productSpecificationsArr.forEach(function (value, index) {
        arr.push(value.id)
      })
      $this.productSpecificationsIdArr=arr
      $this.$forceUpdate()
    },
    updateProductSpecifications:function () {
      var arr=[]
      let $this=this
      console.log('$this.productSpecificationsIdArr',$this.productSpecificationsIdArr)
      $this.allProductSpecificationsArr.forEach(function (value, index) {
        if ($this.productSpecificationsIdArr.indexOf(value.id)>-1){
          arr.push(value)
        }
      })
      $this.$props.callback(arr)
      // console.log('arr',arr)
    },
    getAllProductSpecificationsArr:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameShop+'ShopProductSpecifications/getList',{},function (data) {
        $this.allProductSpecificationsArr=data.list
        if ($this.sourceProductSpecifications.length>0){
          $this.setSelectIds($this.sourceProductSpecifications)
        }
        $this.isShow=true
        $this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped>

</style>
